<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="${(metadata.extendData.keywords?html)!}"/>
    <meta name="description" content="${(metadata.extendData.description?html)!}">
    <meta name="author" content="PublicCMS">
    <title>${(metadata.extendData.title?html)!}</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css" href="${site.resourcePath}bootstrap/css/bootstrap.min.css" />
    <!-- Custom styles for this template -->
    <link href="${site.resourcePath}css/main.css" rel="stylesheet">
    <link href="${site.resourcePath}css/icomoon.css" rel="stylesheet">
    <link href="${site.resourcePath}css/animate-custom.css" rel="stylesheet">
    <link href='${site.resourcePath}css/google.css' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="${site.resourcePath}js/jquery.min.js"></script>
	<script type="text/javascript" src="${site.resourcePath}js/modernizr.custom.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="${site.resourcePath}assets/js/html5shiv.js"></script>
      <script src="${site.resourcePath}assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body data-spy="scroll" data-offset="0" data-target="#navbar-main">
  	<div id="navbar-main">
      <!-- Fixed navbar -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon icon-shield" style="font-size:30px; color:#3498db;"></span>
          </button>
          <a class="navbar-brand hidden-xs hidden-sm" href="#home"><span class="icon icon-shield" style="font-size:18px; color:#3498db;"></span></a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#home" class="smoothScroll">Home</a></li>
			<li> <a href="#about" class="smoothScroll"> About</a></li>
			<li> <a href="#services" class="smoothScroll"> Services</a></li>
			<li> <a href="#team" class="smoothScroll"> Team</a></li>
			<li> <a href="#portfolio" class="smoothScroll"> Portfolio</a></li>
			<li> <a href="#blog" class="smoothScroll"> Blog</a></li>
			<li> <a href="#contact" class="smoothScroll"> Contact</a></li>
		  </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    </div>



		<!-- ==== HEADERWRAP ==== -->
	    <div id="headerwrap" id="home" name="home" style="background:url('${site.resourcePath}${(metadata.extendData.image)!}') no-repeat center top; background-size: cover;">
			<header class="clearfix">
	  		 		<h1><span class="icon icon-shield"></span></h1>
	  		 		<p>${(metadata.extendData.text1)!}</p>
	  		 		<p>${(metadata.extendData.text2)!}</p>
	  		</header>
	    </div><!-- /headerwrap -->

		<!-- ==== GREYWRAP ==== -->
		<div id="greywrap">
			<div class="row">
				<div class="col-lg-4 callout">
					<span class="icon icon-stack"></span>
					<h2>Bootstrap 3</h2>
					<p>Shield Theme is powered by Bootstrap 3. The incredible Mobile First Framework is the best option to run your website. </p>
				</div><!-- col-lg-4 -->

				<div class="col-lg-4 callout">
					<span class="icon icon-eye"></span>
					<h2>Retina Ready</h2>
					<p>You can use this theme with your iPhone, iPad or MacBook Pro. This theme is retina ready and that is awesome. </p>
				</div><!-- col-lg-4 -->

				<div class="col-lg-4 callout">
					<span class="icon icon-heart"></span>
					<h2>Crafted with Love</h2>
					<p>We don't make sites, we craft themes with love & passion. That is our most valued secret. We only do thing that we love.   </p>
				</div><!-- col-lg-4 -->
			</div><!-- row -->
		</div><!-- greywrap -->

		<!-- ==== ABOUT ==== -->
		<div class="container" id="about" name="about">
			<div class="row white">
			<br>
				<h1 class="centered">A LITTLE ABOUT OUR AGENCY</h1>
				<hr>

				<div class="col-lg-6">
					<p>${metadata.extendData.about_us_left!}</p>
				</div><!-- col-lg-6 -->

				<div class="col-lg-6">
					<p>${metadata.extendData.about_us_right!}</p>
				</div><!-- col-lg-6 -->
			</div><!-- row -->
		</div><!-- container -->

		<!-- ==== SECTION DIVIDER1 -->
		<section class="section-divider textdivider divider1" style="background:url('${site.resourcePath}images/bg/divider1.jpg');">
			<div class="container">
				<h1>DESIGN EXPAND BOUNDARIES</h1>
				<hr>
				<p>To achieve real change, we have to expand boundaries. Because the Wild West of what-could-be is unexplored but rife with opportunity.</p>
			</div><!-- container -->
		</section><!-- section -->


		<!-- ==== SERVICES ==== -->
		<div class="container" id="services" name="services">
			<br>
			<br>
			<div class="row">
				<h2 class="centered">ONE BRAND, ONE VOICE.</h2>
				<hr>
				<br>
				<div class="col-lg-offset-2 col-lg-8">
					<p>Employees and consumers. Two halves of a brand’s entirety, the whole of a brand’s audience. Sometimes these two halves have very different viewpoints, creating a weak spot in the brand story. Weakness tarnishes credibility. Brands that aren’t credible aren’t viable.
					</p>
					<p>We squash weakness by designing the whole brand story. It’s crafted around the truism held by employees and consumers to create an experience that connects from the inside out.</p>
					<p>By being true to the brand we represent, we elevate the audiences’ relationship to it. Like becomes love becomes a passion. Passion becomes advocacy. And we see the brand blossom from within, creating a whole story the audience embraces. That’s when the brand can truly flex its muscles.</p>
				</div><!-- col-lg -->
			</div><!-- row -->

			<div class="row">
				<h2 class="centered">MOBILE FIRST THINKING, ALWAYS.</h2>
				<hr>
				<br>
				<div class="col-lg-offset-2 col-lg-8">
					<img class="img-responsive" src="${site.resourcePath}images/iphone.png" alt="">
				</div><!-- col -->
			</div><!-- row -->
		</div><!-- container -->


		<!-- ==== SECTION DIVIDER2 -->
		<section class="section-divider textdivider divider2" style="background:url('${site.resourcePath}images/bg/divider2.jpg');">
			<div class="container">
				<h1>DESIGN IS AN INTERACTION</h1>
				<hr>
				<p>To develop a deeper and more meaningful connection with consumers, we believe design must invite them to take part in the conversation.</p>
			</div><!-- container -->
		</section><!-- section -->

		<!-- ==== TEAM MEMBERS ==== -->
		<div class="container" id="team" name="team">
		<br>
			<div class="row white centered">
				<h1 class="centered">MEET OUR AWESOME TEAM</h1>
				<hr>
				<br>
				<br>
				<@_includePlace path="/index.html/f48b5957-297d-443d-8bdf-a19d6464065b.html"/> <#-- Our Team -->
			</div><!-- row -->
		</div><!-- container -->

		<!-- ==== GREYWRAP ==== -->
		<div id="greywrap">
			<div class="container">
				<div class="row">
					<div class="col-lg-8 centered">
						<img class="img-responsive" src="${site.resourcePath}images/macbook.png" align="">
					</div>
					<div class="col-lg-4">
						<h2>We Are Hiring!</h2>
						<p>Do you want to be one of use? Sure you want, because we are an awesome team!. Here we work hard every day to craft pixel perfect sites.</p>
						<p><a class="btn btn-success">Contact Us</a></p>
					</div>
				</div><!-- row -->
			</div>
			<br>
			<br>
		</div><!-- greywrap -->

		<!-- ==== SECTION DIVIDER3 -->
		<section class="section-divider textdivider divider3" style="background:url('${site.resourcePath}images/bg/divider3.jpg');">
			<div class="container">
				<h1>DESIGN SOLVE PROBLEMS</h1>
				<hr>
				<p>From the purely practical to the richly philosophical, design is the solution to a host of challenges.</p>
			</div><!-- container -->
		</section><!-- section -->

		<!-- ==== PORTFOLIO ==== -->
		<div class="container" id="portfolio" name="portfolio">
		<br>
			<div class="row">
				<br>
				<h1 class="centered">WE CREATE COOL STUFF</h1>
				<hr>
				<br>
				<br>
			</div><!-- /row -->
			<div class="container">
			<div class="row">

				<!-- PORTFOLIO IMAGE 1 -->
				<div class="col-md-4 ">
			    	<div class="grid mask">
						<figure>
							<img class="img-responsive" src="${site.resourcePath}images/portfolio/folio01.jpg" alt="">
							<figcaption>
								<h5>DASHBOARD</h5>
								<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
							</figcaption><!-- /figcaption -->
						</figure><!-- /figure -->
			    	</div><!-- /grid-mask -->
				</div><!-- /col -->


						 <!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
						      a modal for each of your projects. -->

						  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						    <div class="modal-dialog">
						      <div class="modal-content">
						        <div class="modal-header">
						          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						          <h4 class="modal-title">Project Title</h4>
						        </div>
						        <div class="modal-body">
						          <p><img class="img-responsive" src="${site.resourcePath}images/portfolio/folio01.jpg" alt=""></p>
						          <p>This project was crafted for Some Name corp. Detail here a little about your job requirements and the tools used. Tell about the challenges faced and what you and your team did to solve it.</p>
						          <p><b><a href="#">Visit Site</a></b></p>
						        </div>
						        <div class="modal-footer">
						          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						        </div>
						      </div><!-- /.modal-content -->
						    </div><!-- /.modal-dialog -->
						  </div><!-- /.modal -->


				<!-- PORTFOLIO IMAGE 2 -->
				<div class="col-md-4">
			    	<div class="grid mask">
						<figure>
							<img class="img-responsive" src="${site.resourcePath}images/portfolio/folio02.jpg" alt="">
							<figcaption>
								<h5>UI DESIGN</h5>
								<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
							</figcaption><!-- /figcaption -->
						</figure><!-- /figure -->
			    	</div><!-- /grid-mask -->
				</div><!-- /col -->

				<!-- PORTFOLIO IMAGE 3 -->
				<div class="col-md-4">
			    	<div class="grid mask">
						<figure>
							<img class="img-responsive" src="${site.resourcePath}images/portfolio/folio03.jpg" alt="">
							<figcaption>
								<h5>ANDROID PAGE</h5>
								<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
							</figcaption><!-- /figcaption -->
						</figure><!-- /figure -->
			    	</div><!-- /grid-mask -->
				</div><!-- /col -->
			</div><!-- /row -->

				<!-- PORTFOLIO IMAGE 4 -->
			<div class="row">
				<div class="col-md-4 ">
			    	<div class="grid mask">
						<figure>
							<img class="img-responsive" src="${site.resourcePath}images/portfolio/folio04.jpg" alt="">
							<figcaption>
								<h5>PROFILE</h5>
								<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
							</figcaption><!-- /figcaption -->
						</figure><!-- /figure -->
			    	</div><!-- /grid-mask -->
				</div><!-- /col -->

				<!-- PORTFOLIO IMAGE 5 -->
				<div class="col-md-4">
			    	<div class="grid mask">
						<figure>
							<img class="img-responsive" src="${site.resourcePath}images/portfolio/folio05.jpg" alt="">
							<figcaption>
								<h5>TWITTER STATUS</h5>
								<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
							</figcaption><!-- /figcaption -->
						</figure><!-- /figure -->
			    	</div><!-- /grid-mask -->
				</div><!-- /col -->

				<!-- PORTFOLIO IMAGE 6 -->
				<div class="col-md-4">
			    	<div class="grid mask">
						<figure>
							<img class="img-responsive" src="${site.resourcePath}images/portfolio/folio06.jpg" alt="">
							<figcaption>
								<h5>PHONE MOCKUP</h5>
								<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Take a Look</a>
							</figcaption><!-- /figcaption -->
						</figure><!-- /figure -->
			    	</div><!-- /grid-mask -->
				</div><!-- /col -->
			</div><!-- /row -->
			<br>
			<br>
		</div><!-- /row -->
	</div><!-- /container -->

		<!-- ==== SECTION DIVIDER4 ==== -->
		<section class="section-divider textdivider divider4" style="background:url('${site.resourcePath}images/bg/divider4.jpg');">
			<div class="container">
				<h1>DESIGN CREATES EMOTIONAL CONNECTION</h1>
				<hr>
				<p>There’s more to design than meets the eye. It’s when it meets the heart that design creates a meaningful, lasting connection with the audience.</p>
			</div><!-- container -->
		</section><!-- section -->

		<!-- ==== BLOG ==== -->
		<div class="container" id="blog" name="blog">
		<br>
			<div class="row">
				<br>
				<h1 class="centered">WE ARE STORYTELLERS</h1>
				<hr>
				<br>
				<br>
			</div><!-- /row -->
			<@_includePlace path="/index.html/8fc338cc-16e8-4bb6-a1b2-34e2c97bb602.html"/> <#-- WE ARE STORYTELLERS -->
			<br>
			<br>
		</div><!-- /container -->


		<!-- ==== SECTION DIVIDER6 ==== -->
		<section class="section-divider textdivider divider6" style="background:url('${site.resourcePath}images/bg/divider6.jpg');">
			<div class="container">
				<h1>CRAFTED IN NEW YORK, USA.</h1>
				<hr>
				<p>Some Address 987,</p>
				<p>+34 9884 4893</p>
				<p><a class="icon icon-twitter" href="#"></a> | <a class="icon icon-facebook" href="#"></a></p>
			</div><!-- container -->
		</section><!-- section -->

		<div class="container" id="contact" name="contact">
			<div class="row">
			<br>
				<h1 class="centered">THANKS FOR VISITING US</h1>
				<hr>
				<br>
				<br>
				<div class="col-lg-4">
					<h3>Contact Information</h3>
					<p><span class="icon icon-home"></span> Some Address 987, NY<br/>
						<span class="icon icon-phone"></span> +34 9884 4893 <br/>
						<span class="icon icon-mobile"></span> +34 59855 9853 <br/>
						<span class="icon icon-envelop"></span> <a href="#"> agency@blacktie.co</a> <br/>
						<span class="icon icon-twitter"></span> <a href="#"> blacktie_co </a> <br/>
						<span class="icon icon-facebook"></span> <a href="#"> BlackTie Agency </a> <br/>
					</p>
				</div><!-- col -->

				<div class="col-lg-4">
					<h3>Newsletter</h3>
					<p>Register to our newsletter and be updated with the latests information regarding our services, offers and much more.</p>
						<form class="form-horizontal" role="form">
						  <div class="form-group">
						    <label for="inputEmail1" class="col-lg-4 control-label"></label>
						    <div class="col-lg-10">
						      <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="text1" class="col-lg-4 control-label"></label>
						    <div class="col-lg-10">
						      <input type="text" class="form-control" id="text1" placeholder="Your Name">
						    </div>
						  </div>
						  <div class="form-group">
						    <div class="col-lg-10">
						      <button type="submit" class="btn btn-success">Sign in</button>
						    </div>
						  </div>
					   </form><!-- form -->
				</div><!-- col -->

				<div class="col-lg-4">
					<h3>Support Us</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
				</div><!-- col -->
			</div><!-- row -->
		</div><!-- container -->
		<div id="footerwrap">
			<div class="container">
				<h4>Created by <a href="http://www.publiccms.com">Public CMS</a> - Copyright 2016</h4>
			</div>
		</div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
	<script type="text/javascript" src="${site.resourcePath}js/retina.js"></script>
	<script type="text/javascript" src="${site.resourcePath}js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="${site.resourcePath}js/smoothscroll.js"></script>
	<script type="text/javascript" src="${site.resourcePath}js/jquery-func.js"></script>
	${metadata.extendData.code!}
</body>
</html>